/*
 *  Copyright 2022 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import (reference) './variables.less';

// font family
pre {
  font-family: 'Source Code Pro', sans-serif;
}

//font weight
.font-thin {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}

// font size
.text-xss {
  font-size: 10px;
}

.text-base {
  font-size: 1rem /* 16px */;
  line-height: 1.5rem /* 24px */;
}

.text-2xl {
  font-size: 1.5rem /* 24px */;
  line-height: 2rem /* 32px */;
}

.text-3xl {
  font-size: 1.875rem /* 24px */;
  line-height: 2.5rem /* 32px */;
}

.text-5xl {
  font-size: 3rem /* 48px */;
  line-height: 3rem /* 48px */;
}

// font color
.text-base-color {
  color: @text-color;
}

.text-primary {
  color: @primary-color !important;
  &:hover {
    color: @primary-color;
  }
}

.text-danger {
  color: @error-color;
}

.text-inherit {
  font-size: inherit;
}
.text-color-inherit {
  color: inherit;
}
.error-text {
  color: @error-color;
}
.text-white {
  color: @white;
}
.text-blue {
  color: @primary-heading-color;
}
.text-black {
  color: @black;
}
.text-grey-muted {
  color: @text-grey-muted;
}
.text-grey-3 {
  color: @grey-3;
}
.text-grey-14 {
  color: @grey-400;
}
.text-grey-body {
  color: @text-color;
}
.text-link-color {
  color: @primary-color;
}
.text-gray-400 {
  color: @grey-7;
}
.text-grey-600 {
  color: @grey-600;
}
.text-red-3 {
  color: @red-3;
}
.text-green-3 {
  color: @green-3;
}
.text-body {
  color: @text-color;
}
.text-hover-body {
  &:hover {
    color: @text-color;
  }
}

.generate-text-grey-colors(@n, @i: 100) when (@i =< @n) {
  &-@{i} {
    color: ~'@{grey-@{i}}';
  }

  .generate-text-grey-colors(@n, (@i + 100));
}

.text-grey {
  .generate-text-grey-colors(900);
}

.text-success {
  color: @success-color;
}

.text-failure {
  color: @failed-color;
}

.text-warning-7 {
  color: @yellow-7;
}

a.ant-typography,
.ant-typography a {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: @blue-9;

  &:hover {
    color: @blue-26;
  }

  &:focus {
    color: @blue-9;
  }

  &:disabled {
    color: @grey-300;
  }
}

// font style
.font-italic {
  font-style: italic;
}

// line height
.line-height-16 {
  line-height: 16px;
}

// =============================== New Design System ===============================

.text-secondary-new {
  color: #414651;
}

.border-secondary-new {
  border-color: #d5d7da;
}

//font weight
.font-regular {
  font-weight: @font-regular;
}
.font-medium {
  font-weight: @font-medium;
}
.font-semibold {
  font-weight: @font-semibold;
}
.font-bold {
  font-weight: @font-bold;
}

// Typography Mixins
.text-style(@size, @lh, @ls: 0%) {
  font-size: @size;
  line-height: @lh;
  letter-spacing: @ls;
}

.font-weight-variants() {
  &.regular {
    font-weight: @font-regular;
  }
  &.medium {
    font-weight: @font-medium;
  }
  &.semibold {
    font-weight: @font-semibold;
  }
  &.bold {
    font-weight: @font-bold;
  }
}

// Font Style Definitions
.display-lg {
  .text-style(48px, 60px, -2%);

  .font-weight-variants();
}

.display-md {
  .text-style(36px, 44px, -2%);

  .font-weight-variants();
}

.display-sm {
  .text-style(30px, 38px, 0%);

  .font-weight-variants();
}

.display-xs {
  .text-style(24px, 32px, 0%);

  .font-weight-variants();
}

.text-xl {
  .text-style(20px, 30px);
}
.text-lg {
  .text-style(18px, 28px);
}
.text-md {
  .text-style(16px, 24px);
}
.text-sm {
  .text-style(14px, 20px);
}
.text-xs {
  .text-style(12px, 18px);
}

.ant-typography {
  &.display-lg {
    .display-lg();
  }

  &.display-md {
    .display-md();
  }

  &.display-sm {
    .display-sm();
  }

  &.display-xs {
    .display-xs();
  }

  &.text-xl {
    .text-xl();
  }

  &.text-lg {
    .text-lg();
  }

  &.text-md {
    .text-md();
  }

  &.text-sm {
    .text-sm();
  }

  &.text-xs {
    .text-xs();
  }
}

// =============================== End of New Design System ===============================
